<template>
	<view class="sccer">
		<view class="kong">

		</view>
		<!-- 固定在右下角的元素 -->
		<view class="Корзина">
			<text>Корзина</text>
		</view>
		<view class="centre">
			<view class="retues" @click="fanhui">
				<image src="@/static/TestImg/arrow-left.png" class="retuin"></image>
			</view>
			<u-tabs :list="list" @click="click" lineWidth="100rpx" lineHeight="4rpx" lineColor="#f56c6c"
				tabs-align="center" :activeStyle="{
						color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 16px; padding-right: 15px; height: 38px;">
			</u-tabs>
			<view>
				<image src="" class="deture"></image>
			</view>
		</view>
		<view class="butom" v-for="(item,i) in quanbu" :key="i">
			<view v-if="a">
				<view class="Module-I">
					<view class="ball-I"></view>
					<view class="ball-II"></view>
					<view class="number-I">
						<text>￥</text>
						<text class="number-II">{{item.discount}}</text>
						<h4 class="H">无门槛劵</h4>
						<view class="N">
							{{item.typeOfCoupons}}
							
						</view>
						<text class="youxiaoqi">{{item.receivedAt}}-{{}}</text>
						
					</view>
					
					<view class="use">
						<h3>.</h3>
						<h3>.</h3>
						<h3>.</h3>
						<h3>.</h3>
						<h3>.</h3>
					</view>
					<view class="walk">
						<text>去使用</text>
					</view>
				</view>
			</view>
		</view>
		<view class="butomtow">
			<view v-if="b">
				<view class="box0b">
					<view class="boxA">
						<text class="M" style="font-family: CustomFont;">￥0</text>
						<text class="S">去使用</text>
					</view>
					<view class="cccp" >
						<view class="de">
							<u-tabs :list="listOne" @click="clicks" lineWidth="40px" lineColor="#00007f" :activeStyle="{
							            color: '#aa0000',
							            fontWeight: 'bold',
							            transform: 'scale(1.05)'
							        }" :inactiveStyle="{
							            color: '#000000',
							            transform: 'scale(1)'
							        }" itemStyle="padding-left: 16px; padding-right: 15px; height: 38px;">
							</u-tabs>
						</view>
						<view class="buo" >
							<view v-if="j">
								<view class="прав" >
									<view class="Module-I"  v-for="(item,i) in yishiyong" :key="i">
										<view class="ball-I"></view>
										<view class="ball-II"></view>
										<view class="number-I">
											<text>￥</text>
											<text class="number-II">{{item.discount}}</text>
											<h4 class="H">啊啊啊啊啊</h4>
											<view class="N">
												{{item.typeOfCoupons}}
											</view>
												<text class="youxiaoqi">{{item.receivedAt}}-{{}}</text>
										</view>
										<view class="use">
											<h3>.</h3>
											<h3>.</h3>
											<h3>.</h3>
											<h3>.</h3>
											<h3>.</h3>
										</view>
										<view class="walk">
											<text>已使用</text>
										</view>
									</view>
									<!-- <view class="wu"> -->
									<!-- <image src=""></image>
									<text>暂时没有优惠红包喔</text> -->
									<!-- </view> -->
								</view>
							</view>
						</view>
						<view class="buoa">
							<view v-if="k">
								<view class="прав">
									<view class="Module-I"  v-for="(item,i) in yishixiao" :key="i">
										<view class="ball-I"></view>
										<view class="ball-II"></view>
										<view class="number-I">
											<text>￥</text>
											<text class="number-II">{{item.discount}}</text>
											<h4 class="H">无门槛劵</h4>
											<view class="N">
													{{item.typeOfCoupons}}
											</view>
												<text class="youxiaoqi">{{item.receivedAt}}-{{}}</text>
										</view>
										<view class="use">
											<h3>.</h3>
											<h3>.</h3>
											<h3>.</h3>
											<h3>.</h3>
											<h3>.</h3>
										</view>
										<view class="walk">
											<text>已失效</text>
										</view>
									</view>
									<!-- <view class="wu">
										<image src=""></image>
										<text>暂时没有使用过的优惠</text>
									</view> -->
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="ccrp">
			<view v-if="c" v-for="(item,i) in shangjiahongbao" :key="i">
				<view class="box11">
					<view class="Module-I">
						<view class="ball-I"></view>
						<view class="ball-II"></view>
						<view class="number-I">
							<text>￥</text>
							<text class="number-II">{{item.discount}}</text>
							<h4 class="H">无门槛劵</h4>
							<view class="N">
								{{item.typeOfCoupons}}
							</view>
								<text class="youxiaoqi">{{item.receivedAt}}-{{}}</text>
						</view>
						<view class="use">
							<h3>.</h3>
							<h3>.</h3>
							<h3>.</h3>
							<h3>.</h3>
							<h3>.</h3>
						</view>
						<view class="walk">
							<text>去使用</text>
						</view>
					</view>
					<!-- <view class="wu"> -->
					<!-- <image src="" mode="" class="yhj"></image>
					<text class="myh">暂时没有门店劵喔</text> -->
					<!-- </view> -->
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		onLoad() {
			
			this.userId = uni.getStorageSync('id');


			// 未使用
			this.request("/getFollowsPosts/unused", "get", {
				userId: this.userId
			}).then(
				(res) => {
					console.log(res);
					this.quanbu = res.data.result;
						this.chulishuju();


				}).catch((err) => {
				console.log(err);
			});
			//已使用
			this.request("/getFollowsPosts/used", "get", {
				userId: this.userId
			}).then(
				(res) => {
					console.log(res);
					this.yishiyong = res.data.result;
						console.log(this.yishiyong);
			
			
				}).catch((err) => {
				console.log(err);
			});
			//已失效
			this.request("/getFollowsPosts/expired", "get", {
				userId: this.userId
			}).then(
				(res) => {
					console.log(res);
					this.yishixiao = res.data.result;
					
			
			
				}).catch((err) => {
				console.log(err);
			});
		},
		
		data() {
			return {
				shangjiahongbao: [],
				quanbu: [],
				yishiyong:[],
				yishixiao:[],

				list: [{
					name: '优惠劵',
				}, {
					name: '优惠券详情',
				}, {
					name: '门店劵',
					badge: {
						isDot: true
					}
				}],
				a: true,
				b: false,
				c: false,
				listOne: [ {
					name: '已使用',
				}, {
					name: '已失效',
				}],
				j: true,
				k: false,
				l: false,
			}
		},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				})

			},
			click(e) {
				console.log(e.index);
				if (e.index == 0) {
					this.a = true;
					this.b = false;
					this.c = false;
				} else if (e.index == 1) {
					this.a = false;
					this.b = true;
					this.c = false;
				} else if (e.index == 2) {
					this.a = false;
					this.b = false;
					this.c = true;
				}
			},
			clicks(r) {
				console.log(r.index);
				if (r.index == 0) {
					this.j = true;
					this.k = false;
					this.l = false;
				} else if (r.index == 1) {
					this.j = false;
					this.k = true;
					this.l = false;
				} else if (r.index == 2) {
					this.j = false;
					this.k = false;
					this.l = true;
				}
			},
			chulishuju() {
				for (let i = 0; i <= this.quanbu.length; i++) {
					if (this.quanbu[i].typeOfCoupons == "商家红包") {
						this.shangjiahongbao.push(this.quanbu[i]);

					}
					// if(this.statuss[i].status=="pending"){
					// 	this.statuss[i].status="待处理"
					// 	this.statusdaifukuan.push(this.statuss[i])
					// }
					// if(this.statuss[i].status=="shipped"){
					// 	this.statuss[i].status="已发货"
					// 	this.statusyifahuo.push(this.statuss[i])
					// }

				}


			},
		}
	}
</script>

<style scoped>
	.youxiaoqi{
		display: block;
		width: 250rpx;
		font-size: 20rpx;
		position: absolute;
		top: 30rpx;
		left: -30rpx;
	}
	.wu {}

	.kong {
		width: 100%;
		height: 60rpx;
		background: linear-gradient(to bottom, #FFEFEF, #FFEFEF);
	}

	/* 引入在线字体 */
	@font-face {
		font-family: 'OnlineFont';
		src: url('https://fonts.googleapis.com/css?family=Roboto&display=swap') format('woff2');
	}

	.Корзина text {
		width: 100%;
		height: 100%;
		background-size: contain;
		background-image: url();
	}

	.Корзина {
		position: fixed;
		bottom: 160rpx;
		right: 80rpx;
		background-color: #ffffff;
		padding: 12px;
	}

	.walk {
		margin-top: 100rpx;
		margin-left: 94rpx;
		border: 2px solid #000;
		border-radius: 10rpx;
		display: flex;
		width: 100rpx;
		height: 40rpx;
	}

	.use h3 {
		position: relative;
		left: 60rpx;
		bottom: 12rpx;
	}

	.use {
		flex-wrap: wrap;
		display: flex;
		width: 8rpx;
		height: 80rpx;

	}

	.N {
		margin-left: 122rpx;
		margin-top: 20rpx;
	}

	.H {
		position: relative;
		bottom: -80rpx;
		left: -60rpx;
	}

	.number-II {
		background-size: 40rpx;
	}

	.number-I text {
		position: relative;
		flex-wrap: nowrap;
		bottom: -80rpx;
		left: -40rpx;
	}

	.number-I {
		position: relative;
		color: crimson;
	}

	.ball-II {
		position: relative;
		bottom: -88rpx;
		right: -510rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #ffffff;
	}

	.ball-I {
		position: relative;
		bottom: -88rpx;
		left: -30rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: #ffffff;
	}

	.Module-I {
		display: flex;
		border-radius: 40rpx;
		margin-top: 40rpx;
		margin-left: 350rpx;
		width: 600rpx;
		height: 240rpx;
		background-color: #d1d1bf;
	}

	.box11 {
		position: absolute;
		right: 82rpx;
		/* 居中 */
		/* width: 244%;
		height: 1246rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
	}

	.прав {
		position: absolute;
		right: 180rpx;
		margin-top: 40rpx;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.прав image {
		width: 350rpx;
		height: 500rpx;
	}

	.cccp {
		display: flex;
		width: 112%;
		height: 1060rpx;
		padding-top: 28rpx;
		flex-direction: column;
		/* background-color: aliceblue; */
		/* 往左平移20px */
		transform: translateX(-20px);
	}

	.centre {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 120rpx;
		background: linear-gradient(to bottom, #FFEFEF, #FFFFFF);
		border-bottom: 4rpx solid #FFEFEF;
	}

	.box01 {
		width: 210%;
		height: 1280rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.box02 {
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: right;
	}

	.box0b {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.butomtow {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 18rpx;
	}

	.boxA {
		width: 600rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 30rpx;
		background-color: rgb(226, 227, 224);
	}

	.M {
		margin-left: 10rpx;
		font-size: 80rpx;
		color: rgb(241, 58, 86);
	}

	.S {
		margin-right: 30rpx;
		width: 104rpx;
		height: 50rpx;
		color: rgb(241, 58, 86);
		align-items: center;
		font-size: 33rpx;
		border: 1px solid rgb(241, 58, 86);
		border-radius: 20rpx;
	}

	.gwc {
		width: 80rpx;
		height: 80rpx;
	}

	.myh {
		color: bisque;
	}

	.yhj {
		width: 300rpx;
		height: 330rpx;
	}

	.butom {
		justify-content: center;
		display: flex;
		width: 400rpx;
	}

	.sccer {
		flex-wrap: wrap;
		height: 100%;
		width: 100%;
		display: flex;
	}

	.retuin {
		width: 40rpx;
		height: 40rpx;
	}

	.deture {
		width: 60rpx;
		height: 60rpx;
	}
</style>
